<template>
  <div>
    <div class="!md:m-4 !md:mb-0">
      <CardGrid
        page="global"
        :col-num="4"
        :condition-list="globalConditions"
        :start="props.start"
        :end="props.end"
        :step="props.step"
      />
    </div>
    <div class="grid grid-cols-2 md:gap-4 !md:m-4">
      <LabelLineChart
        page="global"
        condition-name="all_percentile"
        :start="props.start"
        :end="props.end"
        :step="props.step"
      />
      <Heatmap
        page="global"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        :condition-name="globalHeatmapCondition"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import CardGrid from '../cards/CardGrid.vue';
import LabelLineChart from '../../../common/LabelLineChart.vue';
import Heatmap from '../../../common/Heatmap.vue';

export default defineComponent({
  components: {
    CardGrid,
    LabelLineChart,
    Heatmap,
  },
  props: {
    start: String,
    end: String,
    step: String,
  },
  setup(props) {
    const globalConditions = ref([
      'service_cpm',
      'service_resp_time',
      'service_apdex',
      'endpoint_avg',
    ]);

    const globalLineCondition = ref('all_percentile');

    const globalLineEntity = ref({
      scope: 'All',
      normal: true,
    });

    const globalHeatmapCondition = ref('all_heatmap');

    watch(() => [props.start, props.end, props.step], { immediate: true, deep: true });

    return {
      props,
      globalConditions,
      globalLineCondition,
      globalLineEntity,
      globalHeatmapCondition,
    };
  },
});
</script>
